import React from 'react';
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util,
} from 'bizcharts';
import DataSet from '@antv/data-set';

class Histogram extends React.Component {
  render() {
    const { values, xWidth, yMax, xMin, xLineValue, fallX, x20, x80 } = this.props;

    const data = [];

    for (let i = 0; i < values.length; i++) {
      const obj = {};
      obj.value = values[i];
      data.push(obj);
    }

    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.transform({
      type: 'bin.histogram',
      field: 'value',
      binWidth: xWidth,
      as: ['value', 'count'],
    });
    const cols = {
      value: {
        nice: false,
        min: xMin,
        tickInterval: xWidth / 2,
        alias: '涨跌幅(%)',
      },
      count: {
        max: yMax,
        alias: '比例(%)',
      },
    };

    const markData = [
      {
        xLineValue,
        type: 'Client',
        percentValue: '90%',
        value: 19.5,
      },
      {
        xLineValue: fallX,
        type: 'Client1',
        percentValue: '10%',
        value: 19.5,
      },
      {
        xLineValue: x20,
        type: 'Client2',
        percentValue: '20%',
        value: 17.5,
      },
      {
        xLineValue: x80,
        type: 'Client3',
        percentValue: '80%',
        value: 17.5,
      },
    ]; // 格式化文本

    function formatter(text, item) {
      const { point } = item;
      const { type } = point;
      return `<div style="width: 60px;text-align: center;font-size: 18px;line-height: 1.2;color: #fff;margin-left: -8px;"><span>${type}</span><br><span>${text}</span></div>`;
    } // 处理数据
    function sortNumber(a, b) {
      return a - b;
    }
    const ticks1 = values.sort(sortNumber);

    const view2Scale = {
      value: {
        min: 0,
        max: 20,
      },
      xLineValue: {
        ticks: [
          Math.floor(ticks1[0] / xWidth) * xWidth,
          Math.ceil(ticks1[ticks1.length - 1] / xWidth) * xWidth,
        ],
        // ticks: ticks1
      },
    };

    return (
      <div>
        <Chart style={{ marginTop: -0 }} height={480} data={dv} scale={cols} forceFit>
          <View data={markData} scale={view2Scale}>
            <Tooltip visible={false} />
            <Geom
              type="interval"
              position="xLineValue*value"
              color={['type', ['#ff7f00', '#093', '#ff7f00', '#093']]}
              size={3}
            />
            <Geom
              type="point"
              position="xLineValue*value"
              color={['type', ['#ff7f00', '#093']]}
              shape="circle"
              size={0}
            >
              <Label
                content={[
                  'xLineValue*percentValue',
                  (xLineValue, percentValue) => {
                    return `${`${xLineValue}\n${percentValue}`}`;
                  },
                ]}
                custom
                renderer={formatter}
                offset={15}
                textStyle={{
                  textAlign: 'center', // 文本对齐方向，可取值为： start center end
                  fill: '#000000', // 文本的颜色
                  fontSize: '12', // 文本大小
                  fontWeight: 'bold', // 文本粗细
                }}
              />
            </Geom>
          </View>
        </Chart>
        <Chart
          style={{ marginTop: -400, paddingTop: -10 }}
          height={400}
          data={dv}
          scale={cols}
          forceFit
        >
          <Axis
            name="value"
            title
            label={{
              formatter: val => {
                if (val % xWidth) {
                  return '';
                }
                return val;

                return '';
              },
              textStyle: {
                textAlign: 'center', // 文本对齐方向，可取值为： start center end
                fill: '#000000', // 文本的颜色
                fontSize: '12', // 文本大小
                fontWeight: 'bold', // 文本粗细
              },
            }}
          />
          <Axis
            name="count"
            title
            label={{
              formatter: val => {
                return `${((val / values.length) * 100).toFixed(2)}%`;
              },
              textStyle: {
                textAlign: 'center', // 文本对齐方向，可取值为： start center end
                fill: '#000000', // 文本的颜色
                fontSize: '12', // 文本大小
                fontWeight: 'bold', // 文本粗细
              },
            }}
          />

          <Tooltip title="value" inPlot={false} crosshairs={false} position="top" />
          <Geom
            type="interval"
            position="value*count"
            tooltip={[
              'count*value',
              (count, value) => {
                return {
                  name: '比例',
                  title: value,
                  value: `${((count / values.length) * 100).toFixed(2)}%`,
                };
              },
            ]}
          >
            <Label
              custom={false}
              offset={19}
              autoRotate
              content={[
                'value*count',
                (value, count) => {
                  return `${`${((count / values.length) * 100).toFixed(2)}`}`;
                },
              ]}
              textStyle={{
                textAlign: 'end', // 文本对齐方向，可取值为： start middle end
                fontSize: '11', // 文本大小
                fontWeight: 'bold',
                fill: '#000000',
                rotate: -45, // 文字旋转
                textBaseline: 'middle', // 文本基准线，可取 top middle bottom，默认为middle
              }}
            />
          </Geom>
        </Chart>
      </div>
    );
  }
}

export default Histogram;
